<template>
  <view class="body">

    <scroll-view
      class="scroll-view"
      scroll-y
      @refresherrefresh="OnRefresherRefresh"
      refresher-enabled
      :refresher-triggered="isTriggered"
    >
      <view class="headWrapper">
        <view class="personInfo">
          <view class="personInfo-left">
            <image
              src="http://xcxtp.njmswl.com/images/index/profilePicture.png"
              class="profileImg"
            />
          </view>
          <view class="personInfo-right">
            <text class="personName-text">蓝鸽房产</text>
            <view class="introduce" @click="introduction">
              <image
                src="http://xcxtp.njmswl.com/images/index/introduction.png"
                class="introduction"
              />
              简介
            </view>
            <text class="location">位置：江苏省南京市浦口区星火路10号</text>
          </view>
        </view>
        <view class="visitor">
          <view class="visitorItem">
            <image
              class="visitorImg avatarOne"
              src="http://xcxtp.njmswl.com/images/index/avatarOne.jpg"
              mode="widthFix"
            />
            <image
              class="visitorImg avatarTwo"
              src="http://xcxtp.njmswl.com/images/index/avatarTwo.jpeg"
              mode="widthFix"
            />
            <image
              class="visitorImg avatarThree"
              src="http://xcxtp.njmswl.com/images/index/avatarThree.jpg"
              mode="widthFix"
            />
            <image
              class="visitorImg avatarFour"
              src="http://xcxtp.njmswl.com/images/index/avatarFour.jpg"
              mode="widthFix"
            />
            <image
              class="visitorImg avatarFive"
              src="http://xcxtp.njmswl.com/images/index/avatarFive.jpeg"
              mode="widthFix"
            />
            <image
              class="visitorImg avatarSix"
              src="http://xcxtp.njmswl.com/images/index/more.png"
              mode="widthFix"
            />
          </view>
          <view class="visitorData">访客：{{userCount}}人</view>
        </view>
        <view class="searchHouse">
          <text class="location" @click="selectCity">南京</text>
          <text class="line" @click="selectCity">|</text>
          <image src="http://xcxtp.njmswl.com/images/index/search.png" class="searchImg" />
          <input
            class="searchInput"
            placeholder-class="placeholder"
            type="text"
            placeholder="请输入"
          />
        </view>
        <view class="centerWrapper">
          <view class="advertise">
            <image src="http://xcxtp.njmswl.com/images/index/advertisement.png" />
          </view>
          <view class="centerContent">
            <view
              class="centerItem"
              v-for="(item, index) in routeObj"
              :key="index"
              @click="goDetail(item)"
            >
              <image :src="item.image" class="itemImg" />
              <view class="centerName">{{ item.text }}</view>
            </view>
            <view class="changePage">
              <view class="paging">
                <view class="page1" v-if="true"></view>
                <view class="page2" v-else></view>
              </view>
            </view>
          </view>
          <view class="houseType">
            <view
              class="typeItem"
              @click="onTypeClick(0)"
              :class="{ recommend: selectedType === 0 }"
            >
              <view class="typeText" :class="{ recommendText: selected === 0 }">推荐</view>
              <image
                v-if="trianglePosition === 0"
                src="http://xcxtp.njmswl.com/images/index/triangle.png"
                class="triangle"
              />
            </view>
            <view
              class="typeItem"
              @click="onTypeClick(1)"
              :class="{ recommend: selectedType === 1 }"
            >
              <view class="typeText" :class="{ recommendText: selected === 1 }">二手房</view>
              <image
                v-if="trianglePosition === 1"
                src="http://xcxtp.njmswl.com/images/index/triangle.png"
                class="triangle"
              />
            </view>
            <view class="typeItem" @click="onTypeClick(2)" :class="{ recommend: selected === 2 }">
              <view class="typeText" :class="{ recommendText: selected === 2 }">新房</view>
              <image
                v-if="trianglePosition === 2"
                src="http://xcxtp.njmswl.com/images/index/triangle.png"
                class="triangle"
              />
            </view>
            <view class="typeItem" @click="onTypeClick(3)" :class="{ recommend: selected === 3 }">
              <view class="typeText" :class="{ recommendText: selected === 3 }">出租</view>
              <image
                v-if="trianglePosition === 3"
                src="http://xcxtp.njmswl.com/images/index/triangle.png"
                class="triangle"
              />
            </view>
            <view class="moreType" @click="moreHouse">
              <view>更多房源</view>
              <image src="http://xcxtp.njmswl.com/images/index/rightArrow.png" class="rightArrow" />
            </view>
          </view>
          <view
            class="content"
            v-if="!isAccessTokenSet"
            v-for="item in list"
            :key="item.id"
            @click="detail(item.id, item.flag)"
          >
            <button
              open-type="getPhoneNumber"
              @getphonenumber="onGetphonenumber"
              style="height: 230rpx"
            >
              <view class="contentItem">
                <image :src="item.images && item.images.length ? item.images[0] : defaultImage" class="contentItemImg" />
                <view class="description">
                    <p class="desTitle"><p class="sellFlag">在售</p>{{ item.name }}</p>
                  <p class="positionContent">
                    <span class="houseTag">{{ item.area }}㎡</span>
                    <span class="houseTag">{{ item.asaga }}</span>
                    <span class="houseTag">{{ item.location }}</span>
                    <span class="houseTag"></span>
                  </p>
                  <p class="priceContent">
                    <span class="allPrice">{{ item.price }}/月</span>
                  </p>
                  <p class="tagContent">
                    <span class="houseLabel" v-for="(item, index) in item.tags" :key="index">{{
                      item
                    }}</span>
                  </p>
                </view>
              </view>
            </button>
          </view>
          <view
            class="content"
            v-else
            v-for="item in list"
            :key="item.id"
            @click="goToDetail(item.id, item.flag)"
          >
            <view class="contentItem">
              <image :src="item.images && item.images.length ? item.images[0] : defaultImage" class="contentItemImg" />
              <view>
                <p class="desTitle"><p class="sellFlag">在售</p>{{ item.name }}</p>
                <p>
                  <span class="houseTag">{{ item.area }}㎡</span>
                  <span class="houseTag">{{ item.asaga }}</span>
                  <span class="houseTag">{{ item.location }}</span>
                  <span class="houseTag"></span>
                </p>
                <p>
                  <span class="allPrice">{{ item.price }}/月</span>
                </p>
                <p>
                  <span class="houseLabel" v-for="(item, index) in item.tags" :key="index">{{
                    item
                  }}</span>
                </p>
              </view>
            </view>
          </view>
          <open-program></open-program>
        </view>
      </view>
    </scroll-view>
    <image
      id="closeIcon"
      v-if="showCloseIcon"
      class="closeCalculator"
      src="../../static/tabs/closeCaculate.png"
      mode="scaleToFill"
      @click="closeCaculate"
    />
    <image
      v-if="showImage"
      id="pageContainer"
      class="calculator"
      src="../../static/tabs/Calculator.png"
      @click="gotoCaculate"
      mode="scaleToFill"
    />
    <image
      class="collectHouse"
      src="http://xcxtp.njmswl.com/images/index/collecthouse.png"
      mode="scaleToFill"
      @click="gotoCollect"
    />
     <image
      class="shareCode"
      src="http://xcxtp.njmswl.com/images/share1.png"
      mode="scaleToFill"
      @click="shareCode"
    />
       <view class="sharePoster" v-if="showSharePoster">
       <image class="closeShare"
      v-if="showSharePoster"
      src="../../static/tabs/closeCaculate.png"
      mode="scaleToFill"
      @click="closeShare"
    />
        <view class="relative">   <image class="poster" src="http://xcxtp.njmswl.com/images/820140703.png" />
      <view class="title2">蓝鸽房产</view>
      <view class="save">长按保存</view>
      <view class="tag">买房、租房请联系我</view>
      <img :src="a" show-menu-by-longpress class="code" mode="scaleToFill" />
      <view>
        <image :src="imgUrl" class="profileImg" />
      </view>
      <view class="nikname">{{ mobile }}</view></view>
       </view>
    <view class="shopOwner" v-if="isShow">
      <image src="http://xcxtp.njmswl.com/images/index/shopOwner.png" class="shopOwnerImg" />
      <view>
        <p class="shopText1">{{clerkTel}}</p>
        <p class="shopText2">门店店长</p>
      </view>
      <view class="wechat" @click="addWC">加微信</view>
      <view class="tel" @click="callPhone('15950585715')">打电话</view>
    </view>
    <view class="mask" v-if="showMask"></view>
  </view>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick, computed, watchEffect } from 'vue'

import openProgram from '../components/openProgram.vue'
import { shareAPI } from '@/services/sharePoster'
import { onLoad, onTabItemTap, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import {
  getSecondHandAPI,
  getSecondHandPageAPI,
  getSecondHandHousePageAPI,
} from '@/services/secondHand'
import {
  getNewHouseAPI,
  getNewHousePageAPI,
  getNewHouseCollectionPageAPI,
} from '@/services/newHouse'
import {
  getRentHouseAPI,
  getRentHousePageAPI,
  getRentHouseCollectionCreateAPI,
} from '@/services/rentHouse'
import { getLoginAPI, getSocialLoginAPI, getUserAPI } from '@/services/login'
import { getUserInformationAPI } from '@/services/profile'
import { getUserCode } from '@/services/index'
const selectedType = ref(0)
const selected = ref(0)
const showImage = ref(1)
const list = ref([])
const imgUrl = ref('')
const mobile = ref('')
const nickName = ref('')
//uniapp微信小程序分享页面到微信好友

onShareAppMessage(() => {})

//uniapp微信小程序分享页面到微信朋友圈

onShareTimeline(() => {})

onTabItemTap(() => {
  getRecommandPage()
  updateIsAccessTokenSet()
  getUserPage()
  //判断是否登录并且有scene
  isScene()

  getUserCodeFun()
  getUserInformation()
})

const a = ref()
const getUserCodeFun = async () => {
  const res = await getUserCode({})
  a.value = 'data:image/png;base64,' + res.data
}

const getUserInformation = async () => {
  const userid = uni.getStorageSync('appIdKey')
  console.log('获取个人信息这个函数执行了嘛')
  const res = await getUserInformationAPI({
    // id:userid
  })
  console.log('看这里》》打印个人信息', res)
  imgUrl.value = res.data?.avatar
  mobile.value = res.data?.mobile
  nickName.value = res.data?.nickname
  console.log('dsadsdsad', imgUrl.value)
}

const isShow = ref(0)
onLoad((options) => {
  getRecommandPage()
  getUserPage()
  getUserCodeFun()
  getUserInformation()
  if (options.scene) {
    var scene = decodeURIComponent(options.scene)
    uni.setStorageSync('scene', scene)
    //发请求获取店员信息
  }
})
const showSharePoster = ref(0)
const showMask = ref(0)
const shareCode = () => {
  showSharePoster.value = 1
  showMask.value = 1
}
const closeShare = () => {
  showSharePoster.value = 0
  showMask.value = 0
}
//主页进入详情页授权-------------------------------------------------------------------------
const detailId = ref() //详情信息id
const flag = ref() //标志位
const detail = (id, flagNumber) => {
  detailId.value = id
  flag.value = flagNumber
  console.log('打印id？？？？？？？？', id)
  console.log('打印flag？？？？？？？？？？？？', flagNumber)
  if (flagNumber == undefined) {
    console.log('1111111111111111111111111')
  }
}
// ----------------------- 登录获取手机号方法 参数：1.code 2.encryptedData 3.iv
const isAccessTokenSet = ref(!!uni.getStorageSync('accessToken'))
const updateIsAccessTokenSet = () => {
  isAccessTokenSet.value = !!uni.getStorageSync('accessToken')
}
//店员信息
const clerkTel = ref('')
const clerkName = ref('')
const scene = ref()
const isScene = async () => {
  if (isAccessTokenSet.value && scene.value) {
    //发请求获取信息
     // 显示 Toast 提示
      uni.showToast({
        title: '没有登录也没有sence',
        icon: 'loading',
        duration: 2000
      });
    const res = await shareAPI({})
    clerkTel.value = res.data.mobile
    clerkName.value = res.data.nickname
    isShow.value = true
  } else {
     uni.showToast({
        title: '登录也有scene',
        icon: 'loading',
        duration: 2000
      });
    isShow.value = false
  }
}
const introduction = () => {
  uni.navigateTo({
    url: `/pages/simplePage/company`, // 假设detail页面需要id参数
  })
}
const time = ref()

const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
  const detail = detailId.value
  const flagValue = flag.value
  isAccessTokenSet.value = uni.getStorageSync('accessToken')
  scene.value = uni.getStorageSync('scene')
  if (isAccessTokenSet.value != '') {
    if (flagValue == 0) {
      //新房标志
      uni.navigateTo({
        url: `/pages/simplePage/newHouseDetail?id=${detail}`, // 假设detail页面需要id参数
      })
    } else if (flagValue == 1) {
      //租房标志
      uni.navigateTo({
        url: `/pages/simplePage/rentHouseDetail?id=${detail}`, // 假设detail页面需要id参数
      })
    } else if (flagValue == 2) {
      //二手房标志
      uni.navigateTo({
        url: `/pages/simplePage/secondHandDetail?id=${detail}`, // 假设detail页面需要id参数
      })
    }
  } else {
    const encryptedData = ev.detail.encryptedData
    const iv = ev.detail.iv
    const isId = uni.getStorageSync('appIdKey')
    const res = await getSocialLoginAPI({
      code: ev.detail.code,
      encryptedData: encryptedData,
      iv: iv,
      sourceUserId: scene.value,
    })

    const bearer = 'Bearer '
    uni.setStorageSync('appIdKey', res.data.userId)
    uni.setStorageSync('accessToken', bearer + res.data.accessToken)
    uni.setStorageSync('expiresTime', res.data.expiresTime)
    updateIsAccessTokenSet()
    if (flagValue == 0) {
      //新房标志
      uni.navigateTo({
        url: `/pages/simplePage/newHouseDetail?id=${detail}`, // 假设detail页面需要id参数
      })
    } else if (flagValue == 1) {
      //租房标志
      uni.navigateTo({
        url: `/pages/simplePage/rentHouseDetail?id=${detail}`, // 假设detail页面需要id参数
      })
    } else if (flagValue == 2) {
      //二手房标志
      uni.navigateTo({
        url: `/pages/simplePage/secondHandDetail?id=${detail}`, // 假设detail页面需要id参数
      })
    }
  }
}
//标志位
const flagNumber = ref(10)
const goToDetail = (id, flag) => {
  if (flag == 0) {
    //新房标志
    uni.navigateTo({
      url: `/pages/simplePage/newHouseDetail?id=${id}`, // 假设detail页面需要id参数
    })
  } else if (flag == 1) {
    //租房标志
    uni.navigateTo({
      url: `/pages/simplePage/rentHouseDetail?id=${id}`, // 假设detail页面需要id参数
    })
  } else if (flag == 2) {
    //二手房标志
    uni.navigateTo({
      url: `/pages/simplePage/secondHandDetail?id=${id}`, // 假设detail页面需要id参数
    })
  }
}
//下拉刷新-------------------------------------------------------------------------------------
const isTriggered = ref(false)
const OnRefresherRefresh = async () => {
  console.log('下拉刷新', flagNumber.value)
  // 开启下拉刷新
  isTriggered.value = true
  if (flagNumber.value === 0 || 10) {
    await Promise.all([getRecommandPage()])
  }
  if (flagNumber.value === 1) {
    await Promise.all([getSecondHandPage()])
  }
  if (flagNumber.value === 2) {
    await Promise.all([getNewHousePageList()])
  }
  if (flagNumber.value === 3) {
    await Promise.all([getRentHousePageList()])
  }
  isTriggered.value = false
}
//-------------------token过期---------------------------------------------------------------------------------
function myFunction() {
  time.value = uni.getStorageSync('expiresTime') || 0
  // 获取当前系统时间的时间戳
  const currentTimeTimestamp = Date.now()
  // 检查Token是否过期
  if (time.value === 0) {
  } else if (currentTimeTimestamp >= time.value) {
    // 已过期，进来
    uni.removeStorageSync('accessToken')
    uni.removeStorageSync('appIdKey')
    uni.removeStorageSync('expiresTime')
  } else {
    // 没有过期
  }
}
const intervalId = setInterval(myFunction, 1000)
// 计算房贷的图片-------------------------------------------------------------------------------
//点击❌关闭图片
const showCloseIcon = ref(1)
const closeCaculate = () => {
  showCloseIcon.value = 0
  showImage.value = false
}

//计算房贷的图片-----------------------------------------------------------------------------
const trianglePosition = computed(() => selectedType.value)
const onTypeClick = (type) => {
  selectedType.value = type
  selected.value = type
  flagNumber.value = type
  if (type === 0) {
    //推荐数据请求
    getRecommandPage()
  }
  if (type === 1) {
    //二手房分页数据请求
    getSecondHandPage()
  }
  if (type === 2) {
    getNewHousePageList()
  }
  if (type === 3) {
    getRentHousePageList()
  }
}

//获取用户分页列表-=-------------------------------------------------------------------------
const userCount = ref()
const getUserPage = async () => {
  const res = await getUserAPI({
    pageNo: 1,
    pageSize: 15,
  })
  userCount.value = res.data.total
}
const getRecommandPage = async () => {
  let resultList = []
  try {
    const res1 = await getSecondHandPageAPI({
      pageNo: 1,
      pageSize: 5,
      recommend: 1,
    })
    console.log('bbbbbb')
    if (res1 && res1.data && res1.data.list !== null) {
      console.log('aaaa')
      resultList = [...resultList, ...res1.data.list]
    }

    const res2 = await getNewHousePageAPI({
      pageNo: 1,
      pageSize: 5,
      recommend: 1,
    })
    resultList = [...resultList, ...res2.data.list]

    const res3 = await getRentHousePageAPI({
      pageNo: 1,
      pageSize: 5,
      recommend: 1,
    })
    resultList = [...resultList, ...res3.data.list]

    list.value = resultList
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

const gotoCaculate = () => {
  uni.navigateTo({
    url: '/pages/simplePage/calculate',
  })
}
const gotoCollect = () => {
  uni.navigateTo({
    url: '/pages/simplePage/myCollectHouse',
  })
}

const getSecondHandPage = async () => {
  const res = await getSecondHandPageAPI({
    pageNo: 1,
    pageSize: 5,
  })
  list.value = res.data.list
}
const moreHouse = () => {
  uni.navigateTo({
    url: '/pages/simplePage/newResource',
  })
}
const selectCity = () => {
  uni.navigateTo({
    url: '/pages/simplePage/cityDetail',
  })
}
//新房分页数据请求
const getNewHousePageList = async () => {
  const res = await getNewHousePageAPI({
    pageNo: 1,
    pageSize: 5,
  })
  list.value = res.data.list
}

// 获取租房分页数据列表
const getRentHousePageList = async () => {
  // 数据加载完，退出继续追加分页数据
  const res = await getRentHousePageAPI({ pageNo: 1, pageSize: 5 })
  list.value = res.data.list
}

// 中央部分 跳转路由对象
const routeObj = reactive([
  {
    image: 'http://xcxtp.njmswl.com/images/index/secondHand.png',
    text: '二手房',
    link: '/pages/simplePage/secondHand',
  },
  {
    image: 'http://xcxtp.njmswl.com/images/index/newHouse.png',
    text: '新房',
    link: '/pages/simplePage/newHouse',
  },
  {
    image: 'http://xcxtp.njmswl.com/images/index/hire.png',
    text: '租房',
    link: '/pages/simplePage/rentHouse',
  },
  {
    image: 'http://xcxtp.njmswl.com/images/index/newResource.png',
    text: '最新房源',
    link: '/pages/simplePage/newResource',
  },
  {
    image: 'http://xcxtp.njmswl.com/images/index/rentHouse.png',
    text: '出租',
    link: '/pages/simplePage/hire',
  },
  {
    image: 'http://xcxtp.njmswl.com/images/index/info.png',
    text: '购房资料包',
    link: '/pages/simplePage/information',
  },
  {
    image: 'http://xcxtp.njmswl.com/images/index/calculat.png',
    text: '房贷计算器',
    link: '/pages/simplePage/calculate',
  },
  {
    image: 'http://xcxtp.njmswl.com/images/index/buyHouse2.png',
    text: '求租',
    link: '/pages/simplePage/rent',
  },
])
// 点击 路由跳转到详情页
const goDetail = (param) => {
  if (param.text == '求购') {
    uni.switchTab({
      url: `${param.link}`,
    })
  } else {
    uni.navigateTo({
      url: `${param.link}`,
    })
  }
}
// 添加店长微信

const addWC = () => {
  uni.showModal({
    title: '添加指南',
    content: `微信号：${clerkTel.value}`,
    showCancel: false,
    confirmText: '复制号码',
    success: () => {
      uni.setClipboardData({
        data: `${clerkTel.value}`,
      })
    },
  })
}

// 打电话联系店长
const callPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: clerkTel, // 电话号码
    success: function () {
      console.log('拨打电话成功')
    },
    fail: function () {
      console.log('拨打电话失败')
    },
  })
}
// 房源信息标签
const tag = reactive(['江宁', '东山', '住宅', '88-118㎡'])
const label = reactive(['装修交付', '现房', '大户型'])
</script>
<style lang="scss">
.closeShare {
  position: absolute;
  top: 0;
  right: 0;
  width: 50rpx;
  height: 50rpx;
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
}
.sharePoster {
  z-index: 999;
  margin: 0 auto;
  width: 590rpx;
  height: 822rpx;
  background-color: #fff;
  position: absolute;
  top: 280rpx;
  left: 50%;
  transform: translateX(-50%);
  .relative {
    width: 100%;
    height: 100%;
    .title2 {
      font-size: 36rpx;
      font-weight: 600;
      font-family: PingFang SC;
      position: absolute;
      top: 567rpx;
      left: 36rpx;
    }
    .save {
  font-size: 28rpx;
  color: #afa6a6;
  font-weight: 400;
  font-family: PingFang SC;
  position: absolute;
  top: 740rpx;
  left: 410rpx;
}
.nikname {
  position: absolute;
  top: 678rpx;
  left: 156rpx;
}
.tag {
  font-size: 26rpx;
  color: #afa6a6;
  font-weight: 400;
  font-family: PingFang SC;
  position: absolute;
  top: 743rpx;
  left: 158rpx;
}
.profileImg {
  position: absolute;
  top: 339px;
  left: 6px;
  border-radius: 50%;
  width: 100rpx;
  height: 100rpx;
  margin-left: 23rpx;
  margin-right: 24rpx;
}
.code {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  top: 528rpx;
  right: 10px;
  z-index: 100;
}
    .poster {
      width: 100%;
      height: 60%;
    }
    .code {
      width: 100px;
      height: 100px;
    }
  }
}
.shareCode {
  width: 129rpx;
  height: 129rpx;
  position: fixed;
  bottom: 118rpx;
  right: 0rpx;
}
.sellFlag {
  float: left;
  margin-right: 10rpx;
  font-size: 22rpx;
  background-color: #60b786;
  color: #fff;
  width: 53rpx;
  height: 27rpx;
  text-align: center;
  line-height: 27rpx;
  font-family: 'PingFangSC-Medium';
  font-weight: Medium;
}
.tagContent {
  height: 20rpx;
  left: 0;
  top: 100rpx;
  position: absolute;
}
.priceContent {
  height: 20rpx;
  left: 0;
  top: 60rpx;
  position: absolute;
}

.positionContent {
  height: 20rpx;
  left: 0;
  top: 50rpx;
  position: absolute;
  font-size: 20rpx;
}
.description {
  height: 200rpx;
  position: relative;
}
.calculator {
  position: fixed;
  bottom: 390rpx;
  right: 0rpx;
  width: 154rpx;
  height: 144rpx;
}
.closeCalculator {
  z-index: 999;
  position: fixed;
  bottom: 527rpx;
  right: 0rpx;
  width: 33rpx;
  height: 33rpx;
}
.collectHouse {
  position: fixed;
  // z-index: 999;
  bottom: 250rpx;
  right: 0rpx;
  width: 129rpx;
  height: 129rpx;
}
page {
  background-color: #f3f4f6;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.body {
  position: relative;
  width: 750rpx;
  height: 100%;
  background-color: #f4f5fd;
  // overflow: hidden;
}
.scroll-view {
  flex: 1;
}

.headWrapper {
  width: 100%;
  height: 629rpx;
  padding-top: 164rpx;
  background-image: url(http://xcxtp.njmswl.com/images/profile/bgc.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .personInfo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 120rpx;

    .profileImg {
      width: 120rpx;
      height: 120rpx;
      margin-left: 23rpx;
      margin-right: 24rpx;
    }

    .personInfo-right {
      display: flex;
      flex-wrap: wrap;

      .personName-text {
        height: 33rpx;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 34rpx;
        color: #ffffff;
        line-height: 36rpx;
      }

      .introduce {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 121rpx;
        height: 46rpx;
        margin-left: 20rpx;
        background: rgba(121, 216, 170, 0.4);
        border-radius: 23rpx;
        border: 1px solid #7fddb0;

        font-family: PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;

        .introduction {
          width: 22rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
      }

      .location {
        width: 100%;
        height: 23rpx;
        margin-top: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }

  .visitor {
    display: flex;
    align-items: center;
    width: 100%;
    height: 58rpx;
    margin-left: 168rpx;
    margin-top: 20rpx;

    .visitorItem {
      position: relative;
      width: 300rpx;
      height: 58rpx;

      .visitorImg {
        position: absolute;
        width: 58rpx;
        height: 58rpx;
      }

      .avatarOne {
        left: 0;
        top: 0;
        border-radius: 40px;
      }

      .avatarTwo {
        left: 45rpx;
        top: 0;
        border-radius: 40px;
      }

      .avatarThree {
        left: 90rpx;
        top: 0;
        border-radius: 40px;
      }

      .avatarFour {
        left: 135rpx;
        top: 0;
        border-radius: 40px;
      }

      .avatarFive {
        width: 58rpx;
        height: 58rpx;
        border: none;
        left: 180rpx;
        top: 0;
        border-radius: 40px;
      }

      .avatarSix {
        width: 58rpx;
        height: 58rpx;
        border: none;
        left: 225rpx;
        top: 0;
      }
    }

    .visitorData {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  .searchHouse {
    display: flex;
    align-items: center;
    width: 694rpx;
    height: 80rpx;
    margin-left: 27rpx;
    margin-top: 28rpx;
    padding-left: 26rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .location {
      position: relative;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
    }

    .location::after {
      content: '';
      position: absolute;
      top: 14rpx;
      left: 70rpx;
      width: 0rpx;
      height: 0rpx;
      border: 10rpx solid #000;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    .line {
      height: 20rpx;
      line-height: 20rpx;
      overflow: hidden;
      color: #dcdcdc;
      margin-left: 50rpx;
      margin-right: 20rpx;
    }

    .searchImg {
      width: 27rpx;
      height: 27rpx;
      margin-right: 10rpx;
    }

    .searchInput {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
    }

    .placeholder {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #141b2e;
      opacity: 0.3;
    }
  }

  .centerWrapper {
    position: relative;
    width: 694rpx;
    height: auto;
    margin-top: 24rpx;
    margin-left: 27rpx;

    .advertise {
      width: 694rpx;
      height: 281.3rpx;
      border-radius: 25rpx;
    }

    .centerContent {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 694rpx;
      height: 420rpx;
      margin-top: 25rpx;
      background: #ffffff;
      border-radius: 25rpx;

      .centerItem {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 25%;
        height: 138rpx;
        padding-top: 35rpx;

        .itemImg {
          width: 110rpx;
          height: 110rpx;
        }

        .centerName {
          width: 100%;
          text-align: center;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #000000;
        }
      }

      .changePage {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .paging {
        display: flex;
        width: 62rpx;
        height: 8rpx;
        margin-top: 30rpx;
        background: #e5e5e5;
        border-radius: 4rpx;

        .page1,
        .page2 {
          width: 31rpx;
          height: 8rpx;
          background: #1f1f1f;
          border-radius: 4rpx;
        }
      }
    }

    .houseType {
      display: flex;
      // align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      margin-top: 40rpx;

      .recommend {
        position: relative;
        width: 104rpx;
        display: flex;
        justify-content: center;

        .recommendText {
          position: absolute;
          z-index: 1;
          font-family: PingFang SC;
          font-weight: 600 !important;
          font-size: 34rpx !important;
          color: #000000 !important;
        }

        .triangle {
          position: absolute;
          z-index: 0;
          top: 40rpx;
          width: 50rpx;
          height: 20rpx;
        }
      }

      .typeItem {
        display: flex;

        .typeText {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #7e8496;
          margin-right: 1rpx;
        }
      }

      .moreType {
        display: flex;
        align-items: center;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #9c9eab;

        .rightArrow {
          width: 11rpx;
          height: 18rpx;
          margin-left: 7rpx;
        }
      }
    }

    .content {
      display: flex;
      height: auto;

      .contentItem {
        flex: 1;
        display: flex;
        align-items: center;
        width: 694rpx;
        height: 230rpx;
        background: #ffffff;
        border-radius: 20rpx;
        margin-top: 24rpx;

        .contentItemImg {
          width: 210rpx;
          height: 155rpx;
          background: #000000;
          border-radius: 5rpx;
          margin-left: 26rpx;
          margin-right: 21rpx;
        }

        .desTitle {
          display: flex;
          align-items: center;
          width: 410rpx;
          font-family: PingFang SC;
          font-weight: 550;
          font-size: 30rpx;
          color: #000000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .allPrice {
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 30rpx;
          color: #e75841;
          margin-right: 14rpx;
        }

        .avgPrice {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #989b9e;
        }

        .houseTag {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #020609;
          margin-right: 20rpx;
        }

        .houseLabel {
          width: auto;
          height: 31rpx;
          background: #f3f4fa;
          border-radius: 3rpx;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #687a8c;
          padding: 6rpx 11rpx;
          margin-right: 9rpx;
        }

        .status {
          width: 53rpx;
          height: 27rpx;
          background: #29ba82;
          border-radius: 3rpx;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #ffffff;
          margin-right: 10rpx;
        }
      }
    }
  }
}

.shopOwner {
  position: fixed;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  width: 694rpx;
  height: 110rpx;
  padding-right: 26rpx;
  margin-left: 27rpx;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 15rpx;

  // opacity: 0.75;
  .shopOwnerImg {
    width: 65rpx;
    height: 65rpx;
    margin-left: 28rpx;
    margin-right: 22rpx;
  }

  .shopText1 {
    width: 120rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
  }

  .shopText2 {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #b5b5b5;
  }

  .wechat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134rpx;
    height: 50rpx;
    margin-left: 210rpx;
    margin-right: 16rpx;
    background: #3bc48b;
    border-radius: 25rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }

  .tel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134rpx;
    height: 50rpx;
    background: #3072f5;
    border-radius: 25rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }
}
</style>
